<%@ taglib uri="/WEB-INF/functions.tld" prefix="uf" %>

<input type="hidden" name="link" id="link" value="${feature.featureLink}"/>

<c:set var="insertSuccessRole" value="Perfil inserido com sucesso!"/>
<c:set var="insertErrorRole" value="Ocorreu um erro na inser&ccedil;&atilde;o do perfil"/>
<c:set var="editSuccessRole" value="Perfil editado com sucesso!"/>
<c:set var="editErrorRole" value="Ocorreu um erro na edi&ccedil;&atilde;o do perfil"/>

<div class="btnSpace">
	<button onclick="showContentRole();" title="Adicionar novo perfil" class="skin_colour round_all" title="+ Adicionar Novo">
		<img width="24" height="24" src="contents/images/images/icons/small/white/Upload.png" alt="+ Adicionar novo">
	<span>+ Adicionar novo</span>
	</button>
</div>

<div class="box grid_16 round_all">
	<table class="display table"> 
		<thead> 
			<tr> 
				<th>Id</th>
				<th>Perfil</th> 
				<th>Descri&ccedil;&atilde;o</th> 
				<th>Fun&ccedil;&otilde;es</th> 
			</tr> 
		</thead>
		<tbody>
			<c:forEach items="${uf:getRoles()}" var="role">
				<c:if test="${role.roleId eq param.idRole}">
					<c:set var="editRole" value="${role}"/>
				</c:if>
				<tr class="gradeA">
					<td>${role.roleId}</td> 
					<td>${role.roleName}</td> 
					<td>${role.roleDescription}</td>
					<td class="center"">
						<c:set var="color" value="red"/>
						<c:set var="idRole" value="${role.roleId}"/>
						<c:if test="${role.active}">
							<c:set var="color" value="green"/>
						</c:if>
						<input type="hidden" id="role_${role.roleId}" value="${role.active}"/>
						<button id="roleStat_${role.roleId}" onclick="changeStatsRole('${role.roleId}');" title="Clique para mudar o status" class="${color} skin_colour round_all btnKind">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Facebook%20Like.png">
						</button>
						<button id="roleStat_${role.roleId}" onclick="editRoleBtn('${role.roleId}');" title="Clique para editar" class="blue skin_colour round_all btnKind btnEdit">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Pencil.png">
						</button>
					</td>
				</tr>
			</c:forEach>
		</tbody> 
	</table>
</div>

<input type="hidden" id="last_id_role" name="last_id_role" value="${idRole + 1}"/>

<style type="text/css">
	.btnSpace {
		padding-left:10px;
	}
	.btnKind {
		margin-bottom:-8px;
		padding:4px 0 5px;
	}	
	.btnEdit {
		margin: -19px 0 0 40px;
	}
	
	.black_overlay {
	    background-color: black;
	    height: 100%;
	    left: 0;
	    opacity: 0.7;
	    overflow: auto;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 1000;
	}
	
	.popSuccess{
		background: none repeat scroll 0 0 #F3F3F3;
		display: table;
	    border-radius: 5px 5px 5px 5px; 
	    border-top: 18px solid #4C5766; 
	    box-shadow: 0 0 6px #141414; 
	    left: 500px; 
	    padding-bottom: 20px; 
	    position: fixed; 
	    top: 200px; 
	    width: 430px; 
	    z-index: 1001;
	}
	
	.popSuccess p {
		margin: 25px 30px 5px 95px;
		font-size: 20px;
	}
	
	.popSuccess .fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -33px;
	    width: 31px;
	    z-index: 1000;
	}	
	
	.fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -17px;
	    width: 31px;
	    z-index: 1000;
	}
</style>

<script type="text/javascript">
	
	function fecharRole() {
		$("#black_overlay_role").hide("fade");
		$("#success_dialog_role").hide("fade");
		$("#insertContentRole").hide("fade");
	}
	
	function changeStatsRole(roleId,action) {
		var status = $("#role_" + roleId).val();

		var action = "ENABLE";
		
		if (status == 'true') {
			action = "DISABLE";
		}

		url = "Service-Role?type="+action+"&roleId=" + roleId;
		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				if(action == 'ENABLE') {
					$("#roleStat_" + roleId).removeClass("red");
					$("#roleStat_" + roleId).addClass("green");
				} else {
					$("#roleStat_" + roleId).removeClass("green");
					$("#roleStat_" + roleId).addClass("red");
				}
				
				$("#role_" + roleId).val(action == 'ENABLE');
			} else {
				$("#error").show("fade");
			}
		});
	};
	
	function showContentRole() {
		$("#roleId").val($("#last_id_role").val());
		$("#insertContentRole").show("fade");
		$("#black_overlay_role").show("fade");
		$("#insertContentRole").focus();
	};
	
	function editRoleBtn(idRole) {
		var link = $("#link").val();
		window.location = "./"+ link +"?idRole=" + idRole;
	};
	
	function reload(param, value) {
		var link = $("#link").val();
		window.location = "./"+ link +"?"+ param + "=" + value;
	};
	
	function saveRole() {
		url = "Service-Role?type=INSERT&role=";
		callServiceRole(url, 'insert');
	};
	
	function editRole() {
		url = "Service-Role?type=UPDATE&role=";
		callServiceRole(url, 'edit');
	};
	
	function callServiceRole(url, value) {
		var roleForm = document.roleForm;
		var checks = roleForm.features;
		var lista = new Array();
		for(var i = 0; i < checks.length; i++) {
			var feature = new Feature();
			if(checks[i].checked){
				feature.setFeatureId(checks[i].value);
				lista.push(feature);
			}
		}
		
		var roleActive = $("#roleActive").val();
		var roleId = $("#roleId").val();
		var roleName = $("#roleName").val();
		var roleDescription = $("#roleDescription").val();
			
		if(roleName == '' || roleDescription == '') {
			$("#role_error_div").html("Preencha todos os campos!");
			$("#role_error").show();
			return false;
		}
		
		var role = new Role();
		if (roleActive != null) {
			role.setActive(roleActive != '' && roleActive == 'true' ? true : false);
		}
		if (roleId != '') {
			role.setRoleId(roleId);
		}
		role.setRoleName(roleName);
		role.setRoleDescription(roleDescription);
		role.setFeatures(lista);
		role = JSON.stringify(role);
		
		url = url + role;
		
		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				roleForm.reset();
				reload('success_role', value);
			} else {
				reload('error_role', value);
			}
		});
	}
	
	function Feature(featureId) {
		var featureId;
		
		this.setFeatureId=function(featureId) {
			this.featureId = featureId;
		};
		
		this.getFeatureId=function() {
			return this.featureId;
		};
	};	
	
	function Role() {
		
		var active;
		var roleId;
		var roleName;
		var roleDescription;
		var features;
		
		function Role() {
		};
		
		this.getActive = function() {
			return this.active;
		};
		
		this.getRoleId = function() {
			return this.roleId;
		};
		
		this.getRoleName = function() {
			return this.roleName;
		};
		
		this.getRoleDescription = function() {
			return this.roleDescription;
		};
		
		this.getFeatures = function() {
			return this.features;
		};	
		
		this.setActive = function(active) {
			this.active = active;
		};
		
		this.setRoleId = function(roleId) {
			this.roleId = roleId;
		};
		
		this.setRoleName=function(roleName) {
			this.roleName = roleName;
		};
		
		this.setRoleDescription =function(roleDescription) {
			this.roleDescription =  roleDescription;
		};
		
		this.setFeatures =function(features) {
			this.features =  features;
		};
		
	};
</script>

<c:set var="insert" value="${param.success_role eq null or param.success eq '' ? false : true}"/>

<div style="display: ${insert or not empty editRole ? 'block' : 'none'};" onclick="fecharRole();" id="black_overlay_role" class="black_overlay"></div>
<div style="display: ${insert ? 'block' : 'none'};" id="success_dialog_role" class="popSuccess">
	<div onclick="fecharRole('1');" href="javascript:void(0);" class="fechar"></div>
	<p>${param.success_role eq 'insert' ? insertSuccessRole : editSuccessRole}</p>
</div>

<div id="insertContentRole" class="box grid_8 round_all" style="display: ${not empty editRole ? 'block' : 'none'};position:fixed; left:30%; top:100px;z-index:1000;">
	<h2 class="box_head grad_colour">Perfis</h2>
	<div onclick="fecharRole('1');" href="javascript:void(0);" class="fechar"></div>
	<div class="toggle_container">
		<div class="block">
			<form name="roleForm" id="roleForm" action="." method="POST">
				<input id="roleActive" disabled name="roleActive" type="hidden" class="small" value="${editRole.active}"/>
				
				<label>Id:</label>
				<input title="Role Id" id="roleId" disabled name="roleId" type="text" class="small" value="${editRole.roleId}"/> 
				
				<label>Name:</label>
				<input title="Give the role name" id="roleName" name="roleName" type="text" class="large" value="${editRole.roleName}"/> 

				<label>Description:</label>
				<input title="Give the role description" id="roleDescription" name="roleDescription" type="text" class="large" value="${editRole.roleDescription}"/>

				<label>Features:</label>
				<div class="input_group">
					<c:forEach items="${uf:getFeatures()}" var="feature">
						<c:set var="checked" value="${uf:containsFeature(editRole.features ,feature.featureLink) ? 'checked=yes' : ''}"/>
						<c:if test="${feature.active}">
							<div class="checker"><span><input type="checkbox" ${checked} id="features" name="features" value="${feature.featureId}" style="opacity: 0;"></span></div>${feature.featureName}<br>
						</c:if>
					</c:forEach>
				</div>
				<button type="button" class="button_colour round_all" onClick="${not empty editRole ? 'editRole();' : 'saveRole();'}"><img height="24" width="24" alt="Bended Arrow Right" src="contents/images/images/icons/small/white/Bended%20Arrow%20Right.png"><span>Save</span></button>
				<br/><br/>
				<div id="role_error" name="role_error" class="alert alert_red" style="display: ${not empty param.error ? 'block' : 'none'}">
					<img width="24" height="24" src="contents/images/images/icons/small/white/Alert%202.png">
					<strong id="role_error_div">${param.error_role eq 'insert' ? insertErrorRole : editErrorRole}</strong>
				</div>
			</form>
		</div>
	</div>
</div>